<template>
	<div id="app">
		<div class="menus">
			<Menu theme="light" :active-name="activeName">
				<MenuItem v-for='(item, index) in menuList' :key="item.path" :name="item.name" @click.native="changeRouter(item)">
					<Icon type="ios-people" />
					{{item.title}}
				</MenuItem>
			</Menu>
		</div>
		<div class="container">
			<!-- <keep-alive> -->
				<router-view />
			<!-- </keep-alive> -->
		</div>
	</div>
</template>

<script>
	export default {
		name: 'App',
		components: {

		},
		data() {
			return {
				menuList: this.$router.options.routes,
				activeName: this.$router.options.routes[0].name
			};
		},
		created() {
			console.log(10,this.$router.options.routes);
		},
		mounted() {
			console.log(11,this.$router.options);
		},
		methods: {
			changeRouter(route) {
				this.activeName = route.name;
				this.$router.push(route.path)
			},
		},
	}
</script>

<style lang="less">
	.ivu-menu-vertical.ivu-menu-light:after {
		display: none !important;
	}
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: left;
		color: #2c3e50;
		display: flex;
		width: 100%;
		height: 100vh;
		margin: 0;
	}
	.menus {
		height: 100%;
		border-right: 1px solid #ddd;
	}
	.container {
		padding: 20px 30px;
		flex: 1;
	}
</style>
